<template>
  <div>
    <el-row :gutter="24">
      <el-col :span="17">
        <el-form :inline="true" ref="queryForm" :model="query">
          <el-row type="flex" class="row-bg" justify="space-between">
            <el-col :span="18">
              <!-- 检索条件 start -->
              <el-form-item label="字典名称" prop="name">
                <el-input
                  v-model="query.name"
                  placeholder="请输入字典名称"
                ></el-input>
              </el-form-item>
              <!-- 检索条件 end -->

              <el-form-item>
                <el-button icon="el-icon-search" @click="querySearchForm"
                  >搜索</el-button
                >
                <el-button icon="el-icon-refresh" @click="resetSearchForm"
                  >重置</el-button
                >
              </el-form-item>
            </el-col>

            <el-col :span="6" class="table-tools">
              <el-button
                @click="openDictDialog()"
                icon="el-icon-plus"
                v-if="hasPermission(permission.save)"
                >{{ "添加" + dialogTitle }}</el-button
              >
            </el-col>
          </el-row>
        </el-form>

        <el-table
          :highlight-current-row="true"
          stripe
          border
          :data="tableData"
          style="width: 100%"
          :height="maxTableHeight"
          @row-click="selectedDict"
        >
          <!-- 表格属性 start -->
          <el-table-column prop="name" label="字典名称" width="150">
          </el-table-column>
          <el-table-column prop="code" label="字典编码" width="150">
          </el-table-column>
          <el-table-column prop="code" label="字典值">
            <template slot-scope="{ row }">
              <el-tag
                type="info"
                v-for="(item, itemIndex) in row.values"
                :key="itemIndex"
                >{{ item.name }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="180">
          </el-table-column>
          <!-- 表格属性 end -->

          <el-table-column
            fixed="right"
            label="操作"
            width="90"
            align="center"
            v-if="hasPermission(permission.update)"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="medium"
                icon="el-icon-edit"
                @click="openDictDialog(scope.row)"
              ></el-button>
              <el-button
                type="text"
                size="medium"
                icon="el-icon-delete"
                @click="deleteDictRow(scope.row)"
                v-if="hasPermission(permission.delete)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.page"
          :page-sizes="[10, 20, 50]"
          :page-size="pageInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total"
        >
        </el-pagination>
      </el-col>
      <el-col :span="7">
        <el-row type="flex" class="row-bg" justify="space-between">
          <el-col :span="18">
            <el-tag>选中字典：{{ selectedDictName }}</el-tag>
          </el-col>
          <el-col :span="6" class="table-tools">
            <el-button
              :disabled="selectedDictId == null"
              icon="el-icon-plus"
              @click="openDictValueDialog()"
              v-if="hasPermission(permission.save)"
              >添加字典值</el-button
            >
          </el-col>
        </el-row>
        <el-table
          ref="attrTable"
          :highlight-current-row="true"
          stripe
          border
          :data="dictValueTableData"
          style="width: 100%"
        >
          <el-table-column prop="name" label="字典名称" width="150" />
          <el-table-column prop="code" label="字典编码" width="150" />
          <el-table-column prop="value" label="字典值"> </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="90"
            align="center"
            v-if="hasPermission(permission.update)"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="medium"
                icon="el-icon-edit"
                @click="openDictValueDialog(scope.row)"
              ></el-button>
              <el-button
                type="text"
                size="medium"
                icon="el-icon-delete"
                @click="deleteDictValueRow(scope.row)"
                v-if="hasPermission(permission.delete)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <UpdateDict ref="updateDictDialog" :dialogTitle="dialogTitle"></UpdateDict>
    <UpdateDictValue
      ref="updateDictValueDialog"
      :dialogTitle="dialogTitle"
    ></UpdateDictValue>
  </div>
</template>

<script>
import { mapState } from "vuex";
import listMixins from "@/views/base/listMixins";

// 请求接口 start
import UpdateDict from "@/views/sys/dict/updateDict";
import UpdateDictValue from "@/views/sys/dict/updateDictValue";
import sysApi from "@/api/sysApi";
// 请求接口 end

export default {
  // 组件名称 start
  name: "sysDict",
  // 组件名称 start

  components: {
    UpdateDict,
    UpdateDictValue,
  },
  mixins: [listMixins],
  data() {
    return {
      // 数据 start
      dialogTitle: "字典",
      permission: {
        save: "sys:dict:save",
        update: "sys:dict:update",
        delete: "sys:dict:delete",
      },
      query: {
        name: "",
      },
      // 数据 end
      selectedDictId: null,
      selectedDictName: "",
      // 字典值列表
      dictValueTableData: [],
    };
  },
  methods: {
    // 打开字典弹窗
    openDictDialog(row) {
      if (row) {
        this.$refs["updateDictDialog"].openUpdate(row);
      } else {
        this.$refs["updateDictDialog"].openSave();
      }
    },
    // 打开字典值弹窗
    openDictValueDialog(row) {
      // 设置额外数据
      this.$refs["updateDictValueDialog"].setMeta({
        dictId: this.selectedDictId,
      });
      if (row) {
        this.$refs["updateDictValueDialog"].openUpdate(row);
      } else {
        this.$refs["updateDictValueDialog"].openSave();
      }
    },
    // 选中字典
    selectedDict(row) {
      this.selectedDictId = row.id;
      this.selectedDictName = row.name;
      this.remoteDictValueList(row.id);
    },
    // 查询字典值列表
    remoteDictValueList(dictId) {
      sysApi.sysDict
        .valueList(dictId)
        .then((res) => {
          this.dictValueTableData = res.data;
        })
        .catch((error) => {});
    },
    // 清空选中的字典
    clearSelectedDictInfo() {
      this.selectedDictId = null;
      this.selectedDictName = "";
      this.dictValueTableData = [];
    },
    // 删除字典
    deleteDictRow(row) {
      this.$confirm("确认删除 [" + row.name + "] ?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          sysApi.sysDict
            .delete(row.id)
            .then((res) => {
              this.remoteTableData();
              this.clearSelectedDictInfo();
            })
            .catch(() => {});
        })
        .catch(() => {});
    },
    // 删除字典值
    deleteDictValueRow(row) {
      this.$confirm("确认删除 [" + row.name + "] ?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          sysApi.sysDict
            .deleteValue(row.id)
            .then((res) => {
              this.remoteDictValueList(this.selectedDictId);
            })
            .catch(() => {});
        })
        .catch(() => {});
    },
    remoteTableData() {
      // 分页请求 start
      sysApi.sysDict.listPage(this.searchParams()).then((res) => {
        this.updateTableData(res.data);
        if (res.data.records.length > 0) {
          this.selectedDict(res.data.records[0]);
        }
      });
      // 分页请求 end
    },
  },
  computed: mapState({
    user: (state) => state.user.userInfo,
  }),
};
</script>

<style lang="less" scoped>
.el-tag {
  margin-right: 8px;
}
</style>